<template>
  <van-popup v-model="show" position="bottom">
    <div class="box">
      <div class="btop">
        <span class="t1">{{ $t("long.tip_tiaozhenggang1") }}</span>
        <img
          @click="show = false"
          class="close-img"
          src="../../../assets/images/close.png"
          alt=""
        />
      </div>
      <div class="mbox">
        <van-stepper :min="2" :max="maxMultiple" v-model="multiple" />
        <div class="slibox">
          <van-slider
            class="sliderhua"
            v-model="multiple"
            :max="maxMultiple"
            :min="2"
            active-color="#8992AE"
          >
            <template #button>
              <div
                :style="{ width: multiple == 0 ? '0' : '' }"
                class="custom-button"
              >
                {{ multiple }}X
              </div>
              <div style="padding: 5px">
                <img src="../../../assets/images/stepa.png" />
              </div>
            </template>
          </van-slider>
          <div class="slhtu">
            <img
              class="slimg"
              v-for="(item, index) in 6"
              :key="index"
              @click="multiple = index == 0 ? 2 : index * (maxMultiple / 5)"
              :src="
                multiple >= index * (maxMultiple / 5)
                  ? require('../../../assets/images/stepa.png')
                  : require('../../../assets/images/step.png')
              "
              alt=""
            />
          </div>
        </div>
        <div class="slfont">
          <div class="slf1" v-for="(item, index) in 6" :key="item">
            {{ index == 0 ? 2 : index * (maxMultiple / 5) }}X
          </div>
        </div>
        <p style="text-align:left;margin: 10vw 0 2.5vw;">
        ·{{ $t("long.tip_tiaozhenggang2") }}：{{ maxCanNum }}
        {{tokenCurName}}
      </p>
      <p style="text-align:left;color: #e45360">·{{ $t("long.tip_tiaozhenggang3") }}</p>
      </div>
      <van-button type="info" class="confirm" @click="handleSubmit">{{
        $t("long.queren")
      }}</van-button>
    </div>
  </van-popup>
</template>

<script>
import {Toast} from 'vant'
export default {
  props:['hierarchy','tokenCurName'],
  data() {
    return {
      maxMultiple: 125,
      multiple: 20,
      show: false,
      maxCanNum:0,
      symbolId:''
    };
  },
  created() {},
  watch:{
    // 调整杠杆监听
    multiple(val) {
      if (this.hierarchy.length) {
        let item = this.hierarchy.find(
          (v) => val >= v.startMultiple && val <= v.endMultiple
        );
        this.maxCanNum = item && item.maxPosition;
        // this.minCanNum = item && item.minPosition;
      }
    },
  },
  methods: {
    //调整杠杆
    async handleSubmit() {
      const ret = await this.$http({
        url: "/contract/app/position/multiple/change",
        method: "post",
        data: {
          multiple: this.multiple,
          symbolId: this.symbolId,
        },
      });
      if (ret.data.code === 0) {
        Toast(this.$t("long.contracttoast5"));
        this.$emit('changeMultiple',this.multiple)
        this.show = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.van-popup {
  background-color: #090A1B;
}
.box {
  padding: 3vw 3vw 6vw;
  .btop {
    width: 100%;
    height: 10vw;
    position: relative;
    line-height: 10vw;
    text-align: center;
    font-size: 4.5vw;
    .close-img {
      width: 7vw;
      position: absolute;
      right: 0vw;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
.van-cell {
  background-color: #171A2B;
  color: #fff !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}
::v-deep .van-field__control {
  color: #fff !important;
}
.confirm {
  width: 100%;
  height: 10vw;
  color: #fff;
  background-color: #1989fa;
  border: 1px solid #1989fa;
  margin-top:4vw;
}
.mbox {
  padding: 4vw 1.5vw;
}
.van-stepper {
  // width: 92vw;
  height: 10vw;
  line-height: 10vw;
  margin: 0 auto 8vw;
  background-color: #171A2B;

  ::v-deep .van-stepper__minus {
    background-color: #171A2B;
    color: #d6d6d6;
  }

  ::v-deep .van-stepper__input {
    background-color: #171A2B;
    color: #d6d6d6;
    width: 66vw;
    font-weight: 600;
  }

  ::v-deep .van-stepper__plus {
    background-color: #171A2B;
    color: #d6d6d6;
  }
}
::v-deep .van-slider {
  background-color: #8992AE;
}
.slibox {
  position: relative;
  padding: 0 2vw;

  .sliderhua {
    position: relative;
    margin: 9vw auto 5vw;

    ::v-deep .van-slider__button-wrapper {
      top: -330%;
      z-index: 1;
    }

    .custom-button {
      width: 12vw;
      color: #fff;
      font-size: 10px;
      line-height: 18px;
      text-align: center;
      background-color: #8992AE;
      border-radius: 2px;
      position: relative;
      bottom: 1vw;
      overflow: hidden;
    }

    img {
      width: 6.4vw;
      z-index: 100;
    }
  }

  .slhtu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .slimg {
      width: 4vw !important;
    }
  }
}
.slfont {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 3.2vw;
  color: #8992AE;
  text-align: center;
  .slf1 {
    position: relative;
    left: 2.4vw;
    &:first-child {
      left: 0;
    }
    &:last-child {
      left: 0;
    }
  }
}
</style>